<!--
 @Description 新闻列表组件-左文右图样式
 @author gaohailan
 @date 2022/11/25
-->
<template>
  <section class="news-list-style-one">
    <section class="item-left">
      <section class="left-title etc3">{{ getMapping(item, 'mainTitle') || "" }}</section>
      <section class="left-txt">
        <span v-if="item.publishTime">{{ item.publishTime | newFormatTime }}</span>
        <img v-if="item.audioId" src="./images/news-audio.png" alt="">
      </section>
    </section>
    <section class="item-right">
      <div>
        <label-comp v-if="labelObj !== undefined" :label-list="item.labelList" />
        <van-image :src="setImgPath(getMapping(item, 'coverImgId'), getMapping(item, 'coverImgIdUrl'))" :fit="imgType">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
          <template v-slot:error>
            <img src="../../images/base/error-icon.png" alt>
          </template>
        </van-image>
      </div>

    </section>
  </section>
</template>
<script>
import LabelComp from '@/components/CustomPage/apps/widget/labelComp'
import mixins from './../mixins'

export default {
  name: 'NewsListStyleOne',
  // components: { EmptyPage },
  components: { LabelComp },
  mixins: [mixins],
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    },
    labelObj: {
      type: Object,
      default: () => {
        return undefined
      }
    },
    option: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {}
  }
}
</script>
<style lang="scss">
@import "@/styles/utility/rem.scss";

.news-list-style-one {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: rem(20);
  position: relative;

  .item-left {
    flex: 1;
    padding-right: rem(10);

    .left-title {
      font-size: rem(30);
      font-weight: bold;
      text-align: left;
      color: #333333;
      line-height: 1.5;
    }

    .left-txt {
      margin-top: rem(30);
      font-size: rem(22);
      font-family: PingFang SC Regular, PingFang SC Regular-Regular;
      font-weight: 400;
      text-align: left;
      color: #999999;
      display: flex;
      align-items: center;
      justify-content: space-between;

      > span {
        display: inline-block;
        margin-right: rem(20);
      }

      > img {
        width: rem(49);
        height: rem(49);
      }
    }
  }

  .item-right {
    flex-shrink: 0;
    width: rem(228);
    height: rem(148);

    > div {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: rem(8);
      .van-image {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: rem(8);
        background: #c9c9c9;
        overflow: hidden;

        .van-image__error {
          > img {
            width: rem(120);
            height: rem(120);
          }
        }
      }
    }

  }
}
</style>
